<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>编辑内容</el-breadcrumb-item>
      <el-breadcrumb-item>电影主演列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="text-align: left; padding-left:10px; line-height: 60px">
      <el-button style="float: left; margin-right: 20px;margin-top: 10px" type="success" @click="addMovie">添加
      </el-button>
      <el-input v-model="queryParam" placeholder="请输入要查询的电影名"
                style="float: left;width: 200px;margin-right: 20px;"></el-input>
      <el-button style="float: left;margin-top: 10px" type="info" @click="pageQuery">查询</el-button>
    </el-row>
    <el-table
        :data="tableData"
        class="tableBox"
        style="width: 100%">
      <el-table-column
          label="电影名称"
          width="300">

        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>

      </el-table-column>
      <el-table-column

          label="主演"
          width="500">
        <template slot-scope="scope">
          <span v-for="(actor, index)   in scope.row.actors">
            {{ actor.name }}
             <span v-if="index === scope.row.actors.length-1 "></span>
             <span v-else>/</span>
           </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row.id)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  name: "MovieAndActorList",
  inject: ['reload'],//注入reload方法
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.pageQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this.pageQuery()
    },
    handleEdit(index, id) {
      console.log(index, id);
      this.$router.push({path: "/editMoveAndActor", query: {movieId: id}})
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$http.post("/api/movieAndActor/delete", {id: id})
          .then(res => {
            this.pageQuery()
            this.$message.success("删除成功!")
          }).catch(res => {
        this.$message.error("删除失败,请重试!")
        return false
      })
    },
    addMovie() {
      this.$router.push("/moveAndActor")
    },
    pageQuery() {
      this.$http.get("/api/movie/list", {
        params: {
          page: this.page,
          pageSize: this.pageSize,
          queryParam: this.queryParam
        }
      })
          .then(res => {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.page = res.data.page
            this.pageSize = res.data.pageSize
          })
    }
  },

  data() {
    return {
      queryParam: '',
      page: 1,
      pageSize: 10,
      total: 100,
      tableData: []
    }
  },
  beforeRouteEnter(to, from, next) {
    //每次进入路由前执行
    next(vm => {
      vm.pageQuery();
    })
  }
}
</script>

<style lang="css">
.tableBox th {
  padding: 0 !important;
  height: 50px;
  line-height: 30px;
}

.movie_detail {
  font-size: 12px;
  width: 250px;
}

</style>